<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import { couponListAPIRes } from '../../api'

    const router = useRouter()
    const status = ref(1)
    const listData = ref<any>([])

    const getList = async () => {
        const { data } = await couponListAPIRes({ type: status.value })
        listData.value = data
    }

    onMounted(() => {
        getList()
    })
</script>

<template>
    <van-nav-bar :border="false" fixed placeholder left-arrow @click-left="router.back()" />
    <van-tabs v-model:active="status" color="#7C6186" sticky @change="getList">
        <van-tab title="未使用" :name="1" />
        <van-tab title="已使用" :name="2" />
        <van-tab title="已过期" :name="3" />
    </van-tabs>
    <van-cell-group v-if="listData.length > 0" class="p-4">
        <div v-for="item in listData" :key="item.id" class="h-[150px] p-2.5 coupon_bg bg-[length:100%_100%] bg-no-repeat mb-3" @click="router.replace({ path: '/' })">
            <div class="text-xl italic font-bold leading-[30px] text-[#ea0000]">{{ item.name }}</div>
            <div class="flex items-center justify-between h-[100px] pl-4 coupon_bg2 bg-[length:100%_100%] bg-no-repeat">
                <div class="text-xl text-[#ea0000] drop-shadow-lg">¥<span class="font-bold text-4xl italic">{{ item.price }}</span></div>
                <div class="text-[#bf8e5e] text-sm leading-8">
                    <div class="border-b border-dashed border-[#bf8e5e]">满{{ item.discount }}可使用</div>
                    <div>有效期至{{ item.overdueAt }}</div>
                </div>
                <div class="px-5 text-[#ea0000] text-base">{{ item.state == 0 ? '立即使用' : '不可使用' }}</div>
            </div>
        </div>
    </van-cell-group>
    <van-empty v-else image-size="100" description="暂无优惠劵" />
</template>